<template>
  <b-navbar toggleable="lg" type="dark">
    <b-navbar-brand to="/">
      <b-img src="/images/logo.png" alt="Logo" width="100" height="33.8" />
    </b-navbar-brand>
    <b-navbar-toggle target="nav-collapse-m" />
    <b-collapse id="nav-collapse-m" is-nav>
      <b-navbar-nav>
        <b-nav-item to="/?section=aboutUs">关于我们</b-nav-item>
        <b-nav-item to="/membership">魁牛会员</b-nav-item>
        <b-nav-item to="/?section=download">下载APP</b-nav-item>
        <b-nav-item to="/joinPlatform">商家入驻</b-nav-item>
      </b-navbar-nav>
    </b-collapse>
  </b-navbar>
</template>

<style lang="scss" scoped>
$toggleable-breakpoint: 'lg';

.navbar {
  min-height: 59px;
  background: rgba(253, 190, 34, 1);
}
.navbar-toggler {
  border-color: transparent;
  ::v-deep .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  }
}
.navbar-toggler[aria-expanded='true'] {
  ::v-deep .navbar-toggler-icon {
    background-image: url('/images/close.svg');
  }
}

@media (max-width: 992px) {
  .navbar-collapse {
    margin: 9px -1.2em -0.6em;
    padding-top: 6px;
    padding-bottom: 6px;
    background-color: #f3f3f3;
  }
  .nav-item .nav-link {
    padding: 1rem 1rem 1rem 30px;
    font-size: 14px;
    color: #4a4a4a;
    letter-spacing: 0.5px;
  }
}
@media (min-width: 992px) {
  .nav-item .nav-link {
    color: #fff;
  }
}
</style>
